<template>
	<div class="decorate-xcxlink"
		:style="{padding:tplItemData.modulePadding + 'px ' + tplItemData.levelPadding + 'px'}" >
		<div class="xcxlink-box" >
			<div class="xcxItem" @click="shareImgShow()" >
				<a href="javascript:;">
					<img class="img-live"  :src="tplItemData.bgImg?tplItemData.bgImg:'https://img.wifenxiao.com/h5-wfx/images/noImg.png'" alt="" />
				</a>
			</div>
		</div>
    <div class="j-active-box" v-show="isShowActive">
      <div class="diy-active-box-shade" @click="boxDel"></div>
      <div class="diy-active-boxs">
        <div class="active-content">
          <img :src="shareImg" alt="">
        </div>
        <van-button
          v-if="shareImg"
          class="title"
          @click="saveImg()"
          color="#fff"
          plain
          hairline
          round
          >保存图片</van-button
        >
      <p class="del-btn" @click="boxDel">&times;</p>

      </div>

    </div>
	</div>
</template>

<script>
import Vue from 'vue'
import { posterShareUrl } from '@/api/shop/index'
import small from '@/smallapp/small'

export default Vue.extend({
  name: 'index',
  props: {
    tplItemData: {
      type: Object // 传入参数的类型
    }
  },
  data() {
    return {
      isShowActive: false,
      shareImg: ''
    }
  },
  methods: {
    saveImg() {
      small.saveImage(this.shareImg)
    },
    shareImgShow() {
      if (small.checkLogin()) {
        if (this.tplItemData.shareImg) {
          this.$loadingWrap.show()
          posterShareUrl({ url: this.tplItemData.shareImg }).then(res => {
            this.$loadingWrap.close()
            if (res.status == 1) {
              if (res.data.url) {
                this.shareImg = res.data.url
                this.isShowActive = true
              } else {
                this.$Error('海报加载失败，请稍后再试')
              }
            }
          })
        }
      } else {
        this.$Error('登录成功后才可查看海报')
      }
    },
    boxDel() {
      this.isShowActive = false
    },
    Jump(url, data) {
      this.$JumpPath(this, url, data)
    },
    handleLinkTo(url, data) {
      this.$JumpName(this, url, data)
    },
    JumpUrl(url, data) {
      window.location.href = url
    }
  }
})
</script>

<style lang='scss'>
.img-live {
	width: 100%;
}
.j-active-box{
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9997;
  .title {
    display: block;
    font-size: 32px;
    width: 224px;
    height: 76px;
    margin: 48px auto;
    background: #FF4332;
    color: #fff;
    
  }
  .van-popup__close-icon {
    font-size: 28px;
    color: #9d3434;
  }
  .diy-active-box-shade{
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.4);
    z-index: 9997;
  }
  .del-btn{
    position: absolute;
    // bottom: 80px;
    left: 50%;
    width: 50px;
    height: 50px;
    color: #fff;
    font-size: 50px;
    line-height: 44px;
    text-align: center;
    transform: translateX(-26px);
    font-family: sans-serif,"Helvetica Neue",Helvetica,STHeiTi;
    z-index: 9999;
    border-radius: 50%;
    border: 1px solid #fff;
  }
  .diy-active-boxs{
    width: 90%;
    height: auto;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    z-index: 9998;

    .active-content{
      width: 100%;
      height: 100%;
      overflow: hidden;
      img {
        width: 100%;
        max-height: 70%;
        min-height: 900px;
      }
    }
  }
}
</style>
